
<template>
<div class="box">
    <div class="bg"></div>
    <van-nav-bar id="van-bar" :title="title" fixed :border="border" left-arrow @click-left="onClickLeft">
            <template #left>
                <img :style="{width:widthPx,height:heightPx}" src="@/assets/iconPerfectInformation/nav_back@2x.png" />
            </template>
        </van-nav-bar>
        <div  :style="'margin-top:'+topheight+'px;height:calc(100vh - '+topheight+'px);width:100%;overflow:auto;'">
            <div class="feedback">
                <p class="title">选择类型*</p>
                <div class="select">
                    <div class="select1" @click="isActive=0">
                         <img class="buyActive" src="@/assets/myicon/checkbox-checked.png" v-if="isActive==0" alt="" srcset="">
                        <img class="buyActive" src="@/assets/myicon/checkbox.png" alt="" v-else srcset="">
                        <span>BUG</span>
                    </div>
                    <div class="select1" @click="isActive=1">
                         <img class="buyActive" src="@/assets/myicon/checkbox-checked.png" v-if="isActive==1" alt="" srcset="">
                        <img class="buyActive" src="@/assets/myicon/checkbox.png" alt="" v-else srcset="">
                        <span>建议</span>
                    </div>
                </div>
                 <div class="value">
                       <van-field
    type="textarea"
    v-model="value"
    placeholder="请输入内容"
    rows="5"
    maxlength="200"
    show-word-limit
  />
                 </div>
                 <div class="button" @click="sumbit">
                    确认提交
                 </div>
            </div>
        </div>
   
  </div>
 
</template>

<script>
import {setServiceFeedback} from "@/api/setting"
import { Toast } from 'vant'
export default {
  data(){
      return{
        border:'',
        widthPx:'28px',
        heightPx:'28px',
        topheight:0,
        isActive:0,
        title:'反馈意见',
        value:'',
      }
    },
    mounted(){
      this.topheight=document.getElementById("van-bar").offsetHeight
       
    },
   
    methods:{
      onClickLeft(){
        this.$router.back()
      },
      sumbit(){
        let data={
  rela_type: '',
  content: this.value}
  if(this.isActive==0){
    data.rela_type='bug'
  }else{
    data.rela_type='recom'

  }
  if(data.content.length==0){
    Toast('请输入反馈内容')
    return
  }
       setServiceFeedback(data
            ).then((res) => {
          Toast('提交成功')
          this.$router.back()
      
      
      })
      }
    }
}
</script>

<style  scoped>
.feedback{
    width: 345px;
    margin: 0 auto;
}
.title{
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0;
    color: #1A1A1A ;
}
.select{
    margin-bottom: 18px;
   display: flex;
}
.select1{
    line-height: 20px;
 
        color: #1A1A1A ;
    font-size: 14px;
    margin-right: 32px;
}
.select span{
       vertical-align: top;
}
.select1 img{
    height: 20px;
    width: 20px;
    margin-right: 5px;

}

.button{
    width: 343px;
height: 48px;
background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
border-radius: 8px;
text-align: center;
font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-top: 40px;
line-height: 48px;
}
.value{
    width: 343px;
background: #F5F5F5;
border-radius: 8px;
font-size: 14px;
}
.van-cell{
    background-color: transparent;
}
 .van-cell::after{
    border-color: #D8D8D8;
}
.van-cell__value{
    color: #1A1A1A;
    font-weight: 500;
}
</style>